<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="取件作业" name="1">

        <el-card class="box-card">
          <el-row>
            <el-form :model="form" label-width="100px" class="demo-form-inline" :inline="true">
              <el-col :span="6">
                <el-form-item label="发件人姓名">
                  <el-input v-model="form.order.senderName"></el-input>
                </el-form-item>

              </el-col>
              <el-col :span="6">
                <el-form-item label="发件人地址">
                  <div class="block">
                    <el-cascader filterable :options="options" :value="senderAddressId"
                                 @change="senderHandleChange" style="width: 100%;"
                                 :props="{ label: 'name', value: 'id', children: 'pdAreaVOS' }" clearable>
                    </el-cascader>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="作业状态">
                  <el-select v-model="form.status" placeholder="请选择">
                    <el-option label="全部" value=""/>
                    <el-option value="1" label="代提货"/>
                    <el-option value="2" label="在途"/>
                    <el-option value="4" label="已交付"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="快递员姓名">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
              </el-col>
            </el-form>
            <el-button type="primary" @click="queryTaskPickupDispatch(form)">查询</el-button>
            <el-button @click="clearOption">清空</el-button>

          </el-row>
        </el-card>

        <div>
          <el-card class="box-card" style="height: 500px">

            <div>
              <el-table
                :data="tableData"
                border
                style="width: 100%"
                max-height="400">
                <el-table-column
                  prop="id"
                  label="取件编号"
                  width="150">
                </el-table-column>
                <el-table-column
                  label="快递员分配状态"
                  width="120" v-slot="scope">
                  <template>
                    {{
                      scope.row.assignedStatus == 1 ? '未分配' :
                        scope.row.assignedStatus == 2 ? '已分配' : '手动分配'
                    }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="createTime"
                  label="下单时间"
                  width="200">
                </el-table-column>
                <el-table-column
                  prop="status"
                  label="作业状态"
                  width="120" v-slot="scope">
                  <template>
                    {{
                      scope.row.status == 1 ? '待执行' :
                        scope.row.status == 2 ? '进行中' :
                          scope.row.status == 3 ? '待确认' :
                            scope.row.status == 4 ? '已完成' : '已取消'
                    }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="快递员姓名"
                  width="120">
                </el-table-column>

                <el-table-column
                  prop="order.senderName"
                  label="发件人姓名"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="order.senderPhone"
                  label="发件电话"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="order.senderAddress"
                  label="发件地址"
                  width="200" show-overflow-tooltip v-slot="scope">
                  <template>
                    {{ scope.row.order.senderAddress | getSendingAddress(options,scope.row.order) }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="estimatedStartTime"
                  label="取件计划时间"
                  width="200">
                </el-table-column>
                <el-table-column
                  prop="actualEndTime"
                  label="完成时间"
                  width="200">
                </el-table-column>
                <el-table-column
                  fixed="right"
                  label="操作"
                  width="100">
                  <template slot-scope="scope">
                    <el-button type="text" v-if="scope.row.assignedStatus==1"
                               @click="senderAllocation(scope.row)">分配快递员
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="currentPage" :page-sizes="[10, 15, 20,25]" :page-size="2"
                               layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
              </div>

              <div>
                <el-dialog title="分配快递员" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
                  <div>
                    快递员：
                    <el-select v-model="starter" placeholder="请选择" size="80" @change="handleRemoteMethodChange($event)">
                      <el-option
                        v-for="item in starters"
                        :label="item.name"
                        :value="item">
                      </el-option>
                    </el-select>
                  </div>
                  <span slot="footer" class="dialog-footer">
                       <el-button @click="dialogVisible = false">取 消</el-button>
                       <el-button type="primary" @click="DistributionDeliveryExpress">确 定</el-button>
                    </span>
                </el-dialog>
              </div>

            </div>
          </el-card>
        </div>
      </el-tab-pane>

      <el-tab-pane label="派件作业" name="2">

        <el-card class="box-card">
          <el-row>
            <el-form :model="receiverForm" label-width="100px" class="demo-form-inline" :inline="true">
              <el-col :span="6">
                <el-form-item label="收件人姓名">
                  <el-input v-model="receiverForm.order.receiverName"></el-input>
                </el-form-item>

              </el-col>
              <el-col :span="6">
                <el-form-item label="收件人地址">
                  <div class="block">
                    <el-cascader filterable :options="options" :value="receiverAddressId"
                                 @change="senderHandleChange" style="width: 100%;"
                                 :props="{ label: 'name', value: 'id', children: 'pdAreaVOS' }" clearable>
                    </el-cascader>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="作业状态">
                  <el-select v-model="receiverForm.status" placeholder="请选择">
                    <el-option label="全部" value=""/>
                    <el-option value="1" label="代提货"/>
                    <el-option value="2" label="在途"/>
                    <el-option value="4" label="已交付"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="快递员姓名">
                  <el-input v-model="receiverForm.name"></el-input>
                </el-form-item>
              </el-col>
            </el-form>
            <el-button type="primary" @click="queryTaskPickupDispatch(receiverForm)">查询</el-button>
            <el-button @click="clearOption">清空</el-button>

          </el-row>
        </el-card>

        <div>
          <el-card class="box-card" style="height: 500px">

            <div>
              <el-table
                :data="tableData"
                border
                style="width: 100%"
                max-height="400">
                <el-table-column
                  prop="id"
                  label="取件编号"
                  width="150">
                </el-table-column>
                <el-table-column
                  label="快递员分配状态"
                  width="120" v-slot="scope">
                  <template>
                    {{
                      scope.row.assignedStatus == 1 ? '未分配' :
                        scope.row.assignedStatus == 2 ? '已分配' : '手动分配'
                    }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="createTime"
                  label="下单时间"
                  width="200">
                </el-table-column>
                <el-table-column
                  prop="status"
                  label="作业状态"
                  width="120" v-slot="scope">
                  <template>
                    {{
                      scope.row.status == 1 ? '待执行' :
                        scope.row.status == 2 ? '进行中' :
                          scope.row.status == 3 ? '待确认' :
                            scope.row.status == 4 ? '已完成' : '已取消'
                    }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="快递员姓名"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="order.receiverName"
                  label="收件人姓名"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="order.receiverPhone"
                  label="收件电话"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="order.receiverAddress"
                  label="收件地址"
                  width="200" show-overflow-tooltip v-slot="scope">
                  <template>
                    {{ scope.row.order.receiverAddress | GetShippingAddress(options,scope.row.order) }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="estimatedStartTime"
                  label="取件计划时间"
                  width="200">
                </el-table-column>
                <el-table-column
                  prop="actualEndTime"
                  label="完成时间"
                  width="200">
                </el-table-column>
                <el-table-column
                  prop="signStatus"
                  label="签收"
                  width="120" v-slot="scope">
                  <template>
                    {{ scope.row.signStatus == 1 ? '已签收' : scope.row.signStatus == 2 ? '拒收' : '' }}
                  </template>
                </el-table-column>
                <el-table-column
                  fixed="right"
                  label="操作"
                  width="100">
                  <template v-slot="scope">
                    <el-button type="text" v-if="scope.row.assignedStatus==1" @click="receiverAllocation(scope.row)">分配快递员</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="block">
                <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
                               :current-page="currentPage" :page-sizes="[10, 15, 20,25]" :page-size="2"
                               layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
              </div>

              <div>
                <el-dialog title="分配快递员" :visible.sync="deliverysDialogVisible" width="30%" :before-close="handleClose">
                  <div>
                    快递员：
                    <el-select v-model="delivery" placeholder="请选择" size="80" @change="receiverHandleRemoteMethodChange($event)">
                      <el-option
                        v-for="item in deliverys"
                        :label="item.name"
                        :value="item">
                      </el-option>
                    </el-select>
                  </div>
                  <span slot="footer" class="dialog-footer">
                       <el-button @click="deliverysDialogVisible = false">取 消</el-button>
                       <el-button type="primary" @click="DistributionOfDelivery">确 定</el-button>
                    </span>
                </el-dialog>
              </div>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已取消" name="6">
        <div>
          <el-card class="box-card" style="height: 500px">

            <div>
              <el-table
                :data="tableData"
                border
                style="width: 100%"
                max-height="400">
                <el-table-column
                  prop="id"
                  label="取件编号"
                  width="150">
                </el-table-column>
                <el-table-column
                  label="快递员分配状态"
                  width="120" v-slot="scope">
                  <template>
                    {{
                      scope.row.assignedStatus == 1 ? '未分配' :
                        scope.row.assignedStatus == 2 ? '已分配' : '手动分配'
                    }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="createTime"
                  label="下单时间"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="status"
                  label="作业状态"
                  width="120" v-slot="scope">
                  <template>
                    {{
                      scope.row.status == 1 ? '待执行' :
                        scope.row.status == 2 ? '进行中' :
                          scope.row.status == 3 ? '待确认' :
                            scope.row.status == 4 ? '已完成' : '已取消'
                    }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="快递员姓名"
                  width="120">
                </el-table-column>

                <el-table-column
                  prop="order.senderName"
                  label="发件人姓名"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="order.senderPhone"
                  label="发件电话"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="order.senderAddress"
                  label="发件地址"
                  width="200" show-overflow-tooltip v-slot="scope">
                  <template>
                    {{ scope.row.order.senderAddress | getSendingAddress(options,scope.row.order) }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="estimatedStartTime"
                  label="取件计划时间"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="actualEndTime"
                  label="完成时间"
                  width="120">
                </el-table-column>

              </el-table>
              <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="currentPage" :page-sizes="[10, 15, 20,25]" :page-size="2"
                               layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
              </div>
            </div>
          </el-card>
        </div>
      </el-tab-pane>


    </el-tabs>
  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      activeName: '1',
      form: {order: {}},
      receiverForm: {order: {}},
      options: [],//地址数据
      senderAddressId: "",
      receiverAddressId: "",
      tableData: [], // 订单数据
      currentPage: 1,//页面下标
      total: 0,//总页数
      pageSize: 10,//页面大小
      dialogVisible: false,
      starters: [],//所有发件员
      starter: '',//选中发件员
      id: '',//选中的任务单
      deliverys:[],//所有派件员
      delivery:'',
      deliverysDialogVisible:false,
    };
  },
  async created() {
    await this.queryArea();
    this.form.taskType = 1;
    await this.queryTaskPickupDispatch(this.form);
  },
  filters: {
    GetShippingAddress: function (row, options, row2) {
      let sheng = options.filter(item => item.id == row2.receiverProvinceId);
      let shi = sheng[0].pdAreaVOS.filter(item => item.id == row2.receiverCityId);
      let qu = shi[0].pdAreaVOS.filter(item => item.id == row2.receiverCountyId);
      return sheng[0].name + shi[0].name + qu[0].name + row2.receiverAddress;
    },
    getSendingAddress: function (row, options, row2) {
      let sheng = options.filter(item => item.id == row2.senderProvinceId);
      let shi = sheng[0].pdAreaVOS.filter(item => item.id == row2.senderCityId);
      let qu = shi[0].pdAreaVOS.filter(item => item.id == row2.senderCountyId);
      return sheng[0].name + shi[0].name + qu[0].name + row2.senderAddress;
    },

  },
  methods: {

  //分配派件快递元
   async DistributionOfDelivery(){
      if (this.delivery != '' ) {
        let result = await axios.post("/api/pd-aggregationcjj/pd-task-pickup-dispatch/DistributionDeliveryExpress",
          {id: this.id, agencyId: this.delivery.orgId, courierId: this.delivery.id, actualStartTime: this.getTime()})
        if (result.data.code == "200") {
          await this.queryTaskPickupDispatch(this.receiverForm);
          this.$message.success("分配成功");
          this.deliverysDialogVisible = false;
        }else{
          this.$message.error("分配失败")
        }

      } else {
        this.$message.error("请选中需要分配的快递员")
      }
    },
    //选中派件快递元
    receiverHandleRemoteMethodChange(itme){
      this.delivery=itme;
    },

    //选中取件快递员
    handleRemoteMethodChange(item) {
      this.starter=item;
    },

    //查询分配派货快递员
    async receiverAllocation(row) {
      this.id = row.id;
      let result = await axios.post("/api/pd-aggregationcjj/pd-task-pickup-dispatch/receiverAllocation", row.order);
      this.deliverys = result.data.data
      this.deliverysDialogVisible = true;
    },

      //确认发货员
    async DistributionDeliveryExpress() {
      if (this.starter != '' ) {
        let result = await axios.post("/api/pd-aggregationcjj/pd-task-pickup-dispatch/DistributionDeliveryExpress",
          {id: this.id, agencyId: this.starter.orgId, courierId: this.starter.id, actualStartTime: this.getTime()})
        if (result.data.code == "200") {
          await this.queryTaskPickupDispatch(this.form);
          this.$message.success("分配成功");
          this.dialogVisible = false;
        }else{
          this.$message.error("分配失败")
        }

      } else {
        this.$message.error("请选中需要分配的快递员")
      }

    },

    //查询分配发货快递员
    async senderAllocation(row) {
      this.id = row.id;
      let result = await axios.post("/api/pd-aggregationcjj/pd-task-pickup-dispatch/senderAllocation", row.order);
      this.starters = result.data.data
      this.dialogVisible = true;
    },
    //切换卡片
    handleClick(tab, event) {
      switch (this.activeName) {
        case '1':
          this.form.taskType = 1;
          this.form.status = '';
          this.queryTaskPickupDispatch(this.form);
          break;
        case '2':
          this.receiverForm.taskType = '2';
          this.queryTaskPickupDispatch(this.receiverForm);
          break;
        case '6':
          this.form.taskType = '';
          this.form.status = '6';
          this.queryTaskPickupDispatch(this.form);
      }
    },
    //查询任务表
    async queryTaskPickupDispatch(row) {
      let result = await axios.post("/api/pd-aggregationcjj/pd-task-pickup-dispatch/queryTaskPickupDispatch", {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        condition: row
      });
      this.tableData = result.data.data.list;
      this.total = result.data.data.total;

    },


    //清空级联
    clearOption() {
      this.senderAddressId = [];   //v-model绑定值清空
      this.receiverAddressId = [];   //v-model绑定值清空
      this.form.order.senderCountyId = '';
      this.form.status = null;
      this.receiverForm.order.receiverCityId = '';
      this.receiverForm.status = null;
    },

    // 发货人选中地址
    senderHandleChange(value) {
      this.form.order.senderCountyId = value[2]
    },
    // 收货人选中地址
    receiverHandleChange(value) {
      this.receiverForm.receiverCountyId = value[2]
    },

    // 查询地址
    async queryArea() {
      let result = await axios.post("/api/pd-aggregationcjj/pd-area/queryArea");
      this.options = result.data.data

    },


    // 选中页面大小
    handleSizeChange(val) {
      this.pageSize = val;
      this.queryOrderPage(this.form);
    },
    //选择第几页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.queryOrderPage(this.form);
    },

    // 选中页面大小
    handleSizeChange2(val) {
      this.pageSize = val;
      this.queryOrderPage(this.receiverForm);
    },
    //选择第几页
    handleCurrentChange2(val) {
      this.currentPage = val;
      this.queryOrderPage(this.receiverForm);
    },
    //关闭模态框
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },

    getTime() {
      const now = new Date();

      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
  }
}
</script>

<style scoped>

</style>
